import PropTypes from 'prop-types';
import React, { memo, useState } from 'react';
import { TabWrapper } from './style';
import classNames from 'classnames';
import ScrollView from 'src/base-ui/scroll-view';

const SectionTab = memo((props) => {
  const { tabNames = [] ,tabClick} = props;
  const [currentIndex, setCurrentIndex] = useState(0);
  function itemClickHandle(item, index) {
    console.log(item, index);
      setCurrentIndex(index);
      tabClick(index,item)
  }
  //  className={`item ${currentIndex === index ? 'active' : ''}`} => 使用 classnames库 👇
  return (
    <TabWrapper>
      <ScrollView>
        {tabNames.map((item, index) => (
          <div
            className={classNames('item', { active: index === currentIndex })}
            key={item}
            onClick={(e) => itemClickHandle(item, index)}
          >
            {item}
          </div>
        ))}
      </ScrollView>
    </TabWrapper>
  );
});

SectionTab.propTypes = {
  tabNames: PropTypes.array,
};

export default SectionTab;
